<template>
  <div class="infinite-container">
    <div class="bgwhite">
      <mu-list>
        <mu-list-item title="费用总额">
          <span slot="right" class="feeText">{{order.regFee | fixedMoney}}</span>
        </mu-list-item>
      </mu-list>
    </div>
    <div class="mt10"></div>
    <pay-method></pay-method>
    <div class="flex flex_between flex_vcenter bottomH">
      <div>
        <span>需支付：</span>
        <span class="feeTextBig">{{order.regFee | fixedMoney}}</span>
      </div>
      <mu-raised-button label="立即支付" primary @click="pay()"/>
    </div>
  </div>
</template>

<script>
  import payMethod from '../../components/payMethod.vue'
  import {commonAjax, RESTFUL_API} from '@/api/api'
  import wxPay from '../../api/wxPay.js'
  export default {
    data () {
      return {
        order: JSON.parse(sessionStorage.getItem('order'))
      }
    },
    components: {
      payMethod
    },
    mounted () {
    },
    methods: {
      pay () {
        this.$store.commit('UPDATE_LOADING')
        let body = {
          bustype: 1,
          hisOrderNumber: this.order.hisOrderNumber
        }
        let param = {
          [this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME],
          totalFee: this.order.regFee,
          body: JSON.stringify(body)
        }
        commonAjax(`${RESTFUL_API.wxPay}`, param, true).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 1) {
            wxPay(res.data.data, this.payOk, this.payFail)
          }
        })
      },
      payOk () {
        this.$router.push({
          path: '/payResult',
          query: {
            result: 'ok',
            backPath: '/appointment/history',
            backName: '查看我的预约记录'
          }
        })
      },
      payFail () {
        this.$router.push({
          path: '/payResult',
          query: {
            result: 'fail',
            backPath: '/appointment/payOnline',
            backName: '重新支付'
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/vars";
  @import "../../common/css/flex.css";
  @color-feeText:#F7A945;
  .feeText{
    color:@color-feeText
  }
  .feeTextBig{
    color:@color-feeText;
    font-size:20px;
  }
</style>
